/***variables***/
@bg: #E3F2DF;
@nav: #5D736B;
@header: #A8BFB7;
@promo: #F27405;
@fontColor: #384035;
@xpCellInfos: #4594B0;
@boxShadowColor: #333;
/*other*/
/*media*/
@maxPhoneDisplay: 480px;
/**/
.bold{font-weight: bold;}
.center{text-align:center;}
.inline{display: inline;}
.block{display: block;}
.inlineBlock{display: inline-block;}
.none{display: none;}

/***Global***/
* {margin: 0;padding: 0;}
body {font-family: helvetica, sans-serif; background-color: @bg;font-size: 0.8em;color: @fontColor;}
/**elements**/
a{.bold; color: @nav;text-decoration:none;font-size: 1.2em;}
a:hover, a:active{color: @header;}
h1{
	font-size: 1.2em;
	background-color: @header;
	color: @bg;
	padding: 2px 4px;
	margin: 5px 0;
}
h2{
	font-size: 1em;
	background-color: #B6CFC6;
	color: @bg;
	padding: 0 4px;
	margin: 5px 0;
}
h3{
	font-size: 1em;
	color: @promo;
	margin: 2px 0;
}

ul{list-style: square;}

/**header**/
header{
	background-color: @header;
	box-shadow: 0px 6px 6px 0px @nav;
	margin-bottom: 5px;
	
    div#siteTitle{
        padding:10px;

        @media screen and (max-width: @maxPhoneDisplay) {
            padding:5px;
        }
    }

    a#fgName{
        .bold;
        color: @bg;
        font-size: 2.5em;
        &:hover{
            text-decoration: underline;
        }

        @media screen and (max-width: @maxPhoneDisplay) {
            font-size: 1.5em;
        }
    }
    span#fgDesc{
        .bold;
        color: @nav;
        font-size: 0.9em;
        @media screen and (max-width: @maxPhoneDisplay) {
            .inlineBlock;
        }
    }
}

/**footer**/
footer{
    .center;
	box-shadow: 0px -2px 4px 0px @promo;
	margin: 0 0 10px 0;
    span{
        color: @header;
        font-size: 0.8em;
    }

}

/***content***/
section.content{
	padding: 15px 2%;
}

/**doc**/
section#doc ul{
	padding-left: 40px;
}